<template>
  <div>
    <div class="header">
      <img v-bind:src="[header+info.data.logo]">
      <router-link to="/aboutUs" class="active">关于我们</router-link>
      <router-link to="/introduction">公司简介</router-link>
      <router-link to="/index">首页</router-link>
    </div>
    <template>
      <yd-slider autoplay="3000">
        <yd-slider-item v-for='(image,index) in info.data.banner' :key='index'>
          <img :src="['https://sy.mujiwulian.net/sy/'+image]">
        </yd-slider-item>
      </yd-slider>
    </template>
    <div>
      <img class="headerImg" src="../assets/关于我们@2x.png"/>
      <div class="guanyu">
        <img v-bind:src="['https://sy.mujiwulian.net/sy/'+info.data.about.aboutMapPath]">
      </div>
      <div class="bg">
        <img src="../assets/图层3@2x.png">
        <p class="classp" v-html="info.data.about.aboutContent"></p>
      </div>
    </div>
  </div>
</template>

<script>
    export default {
      name: "AboutUs",
      data() {
        return {
          header:"https://sy.mujiwulian.net/sy/",
          info: {
            code: null,
            msg: "",
            data: {
              banner: [],
              about: {
                id: null,
                aboutMapPath: "",
                aboutContent: ""
              }
            }
          }
        }
      },
      methods:{
      },
      mounted() {
        this.$axios
          .get("https://sy.mujiwulian.net/sy/website/about/?sy="+this.$store.getters.getUser.sy)
          .then(response=>(this.info=response.data));
      }
    }
</script>

<style scoped>
  *{
    margin: 0px;
    padding: 0px;
  }
  .header{
    height: 50px;
    background-color: #194b6a;
    color: aliceblue;
  }
  .header a{
    height: 100%;
    font-size: 10px;
    float: right;
    display:block;
    width: 55px;
    text-align: center;
    margin-left: 10px;
    margin-right: 10px;
    line-height: 50px; /* 设置垂直居中 */
  }
  .active{
    background-color: #39ccbe;
  }
  .header img{
    margin-top: 7.5px;
    margin-left: 10px;
    height: 35px;
    width: 35px;
  }
  .headerImg{
    display: block;
    margin: 30px auto;
  }
  .guanyu{
    display: block;
    text-align: center;
  }
  .guanyu img{
    width: 80%;
    margin-bottom: 50px;
  }
  .classp{
    text-align: center;
    font-size:15px;
    letter-spacing:3px;
    line-height:30px;
    padding-top:10px;/*容器里面的内容从上边距离边框10个像素*/
  }
  .bg {
    border: rgb(213,180,246) solid 2px;
    border-top: none;
    /*background:url(../images/关于我们框@2x.png) no-repeat center ;*/
    /*margin-right: 5%;*/
    /*margin-left: 5%;*/
    /*background-size:100% 100%;*/
  }
  .bg img{
    width: 100%;
    height: 25px;
    position: relative;
    margin-top: -25px;
    z-index: 5;
  }
</style>
